<script>
window.fn = {};

window.fn.load = function(page) {
var content = document.getElementById('content');
content.load(page);
};

</script>

<style>

html, body {
height: 100%;
margin: 0
}

@keyframes breath {
0%   { background-size: 50% auto; }
50% { background-size: 70% auto; }
100% { background-size: 50% auto; }
}

#bkg{
width: 100%;
height: 50%;
position: absolute;top: 30%;
animation: breath 4s linear infinite;
background: url("https://media.giphy.com/media/zBg3B1KnmX69i/giphy.gif") center center no-repeat;
}
</style>


<ons-page>

<div class="content" id="content">
<center><div style="position: absolute;top: 15%;width:100%"><h1><b>My Application</b></h1></div></center>
<div id="bkg"></div>

<ons-bottom-toolbar>

<ons-progress-bar indeterminate></ons-progress-bar>
</br>
<center>Loading...</center>

</ons-bottom-toolbar>
</div>
</ons-page>


<script>
setTimeout(myFunction, 4000);

function myFunction() {
var tPage = $( '#page1' ).html();
$( '#content' ).html( tPage );
}


</script>

<template id="page1">
  <ons-page>
    <h2>TITLE</h2>
    
	CONTENT

   </ons-page>
</template>